<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>公众号</span>
    </div>
    <el-input v-model="filterText" placeholder="输入公众号名称" class="margin-bottom-10"/>
    <el-tree ref="mpTree" :data="list" :props="defaultProps" :filter-node-method="filterNode" node-key="id" class="filter-tree" @node-click="handleNodeClick"/>
  </el-card>
</template>
<style>
  .is-current{background: #c6bfbf !important;}
  .el-tree-node__content:hover{background: #c6bfbf !important;}
  .el-tree-node__content:after{background: #c6bfbf !important;}
</style>
<script>
import { MpService } from '@/api/WeChatService'

export default {
  name: 'WeChatMpListLeft',
  data() {
    return {
      defaultProps: { label: 'name' }, list: [], filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.mpTree.filter(val)
    }
  },
  created() {
    this.initList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) { return true }
      return data.name.indexOf(value) !== -1
    },
    initList() {
      this.listLoading = true
      MpService.getWeChatMpAll().then(response => {
        this.list = response
        this.listLoading = false
        this.$nextTick(() => {
          document.querySelector('.el-tree-node__content').click()
        })
      })
    },
    handleNodeClick(data) {
      this.$emit('choose', data)
    }
  }
}
</script>
